/* 全局样式，设置基本字体和颜色 */
:root {
  --el-color-primary: #1890ff; /* 自定义主色调 */
  --el-font-family: 'Arial', 'Helvetica Neue', Arial, sans-serif; /* 自定义字体 */
}

body {
  font-family: var(--el-font-family);
  color: #333;
}

/* 自定义按钮样式 */
.el-button {
  border-radius: 5px;
  transition: all 0.3s ease;
}

/* 自定义表格样式 */
.el-table {
  z-index: 0;
  overflow: hidden;
  border: none;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgb(0 0 0 / 8%);
  transition: all 0.3s ease;

  &:hover {
    box-shadow: 0 4px 16px rgb(0 0 0 / 12%);
  }

  // 表头样式
  .el-table__header {
    th {
      padding: 14px 16px;
      font-size: 14px;
      font-weight: 600;
      color: var(--el-text-color-primary);
      text-align: left;
      letter-spacing: 0.5px;
      background: var(--el-fill-color-blank);

      // 添加细微的渐变色背景
      background: linear-gradient(to bottom, var(--el-fill-color-blank), var(--el-fill-color-light));
      border-bottom: 2px solid var(--el-color-primary-light-7);

      // 悬停效果增强
      &:hover {
        color: var(--el-color-primary);
        background: linear-gradient(to bottom, var(--el-fill-color-light), var(--el-fill-color));
        transition: all 0.2s ease;
      }
    }
  }

  // 表格内容样式
  .el-table__body {
    tr {
      // 偶数行轻微背景色区分
      &:nth-child(even) {
        td {
          background-color: var(--el-fill-color-blank);
        }
      }

      // 悬停和选中状态增强
      &:hover > td {
        background-color: var(--el-color-primary-light-8);
        transition: background-color 0.2s ease;
      }

      &.current-row > td {
        background-color: var(--el-color-primary-light-7);
        box-shadow: inset 0 0 0 1px var(--el-color-primary-light-5);
      }
    }

    td {
      // 单元格内容溢出处理
      overflow: hidden;
      font-size: 14px;
      color: var(--el-text-color-primary);
      text-overflow: ellipsis;
      white-space: nowrap;
      vertical-align: middle;
      border-bottom: 1px solid var(--el-border-color-lighter);
    }
  }
}

// =============
.el-card {
  border-radius: 10px;
}

/* 自定义滚动条轨道样式 */
.el-scrollbar__bar {
  opacity: 0.7; /* 设置滚动条轨道整体透明度 */
  &.is-horizontal {
    bottom: 2px; /* 水平滚动条距离底部的距离 */
    height: 6px; /* 水平滚动条高度 */
  }

  &.is-vertical {
    right: 2px; /* 垂直滚动条距离右侧的距离 */
    width: 6px; /* 垂直滚动条宽度 */
  }
}

/* 自定义滚动条滑块样式 */
.el-scrollbar__thumb {
  background-color: rgb(0 0 0 / 30%); /* 设置滑块背景颜色及透明度 */
  border-radius: 5px; /* 滑块圆角 */

  &:hover {
    background-color: rgb(0 0 0 / 50%); /* 鼠标悬停时滑块的背景颜色及透明度 */
    opacity: 1; /* 设置滚动条轨道整体透明度 */
  }
}
